<template>
	<view class="container">
		<xk-header :headerbg="true" class="header" :back="true" title="支付详情"></xk-header>
		<view class="image">
			<u--image shape="circle" :showLoading="true" :src="src" width="230rpx" height="230rpx"></u--image>
		</view>
		<view class="successful">支付成功</view>
		<view class="content">会议室预约费用</view>
		<view class="price">￥30.00</view>
		<view class="finish">
			<view style="width: 390rpx;"><u-button @click="finish" type="success" :plain="true" text="完成"></u-button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: this.$config.BASE_imgUrl+'/wx/wxPay.png',
			};
		},
		methods: {
			finish(){
				uni.navigateBack({
					delta: 4
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: rgba(246, 247, 251, 1);
		height: 100vh;
		.image {
			position: relative;
			display: flex;
			justify-content: center;
			top: 100rpx;
		}
		.successful {
			position: relative;
			width: 100%;
			text-align: center;
			top: 140rpx;
			color: #67C473;
			font-size: 40rpx;
			font-weight: 600;
		}
		.content {
			position: relative;
			width: 100%;
			text-align: center;
			top: 240rpx;
			font-size: 28rpx;
		}
		.price {
			position: relative;
			width: 100%;
			text-align: center;
			top: 260rpx;
			font-size: 96rpx;
			font-weight: 600;
		}
		.finish {
			width: 100%;
			position: absolute;
			bottom: 60rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>
